<!doctype html>
<head>
	<title>%title%</title>
	<script>
		var xhr = new XMLHttpRequest();

		function SendReq(elem) {
			elem.classList.add('task_active');
			xhr.open('POST', window.location.pathname);
			xhr.setRequestHeader('Content-Type'
				, 'application/x-www-form-urlencoded; charset=UTF-8');
			xhr.onload = function () {
				// console.log(xhr.responseText);
				if ( xhr.responseText.startsWith('http://') ) {
					// In new tab doesn't work
					// (Do you need to allow popups in your browser?)
					// window.open(xhr.responseText, '_blank');
					window.open(xhr.responseText, '_self');
				} else {
					document.querySelector('.status').textContent = xhr.responseText;
				}
				elem.classList.remove('task_active');
			};
			xhr.send('action=' + elem.textContent);
		}
	</script>
	<style>
		/* https://stackoverflow.com/questions/45536537/centering-in-css-grid */
		
		html,body {
			background-color: black;
			height: 100%;
			margin: 0;
		}
	
		.controls {
			display: grid;
			grid-template-columns: 1fr 1fr;
			grid-auto-rows: auto;
			/* column-gap: 2vmin;
			row-gap: 2vmin; */
			height: 80%;
			/* width: 100%; */
			user-select: none;
		}

		.task {
			display: flex;
			justify-content: left;
			align-items: center;
			padding-left: 1vmin;
			text-align: left;

			color: white;
			font-size: 8vmin;
		}

		.status{
			display: flex;
			justify-content: center;
			align-items: center;
			text-align: center;
			height: 19%;
			
			color: white;
			font-size: 8vmin;
			text-shadow: .1vmin .1vmin 4vmin white;
		}

		.task_active { background-color: #595; }
		.task_inactive {
			color: #444;
			pointer-events: none;
		}

		@media (orientation: landscape) {
			.controls {
				grid-template-columns: 1fr 1fr 1fr 1fr;
				height: 70%;
			}

			.status{
				height: 25%;
				font-size: 8vmin;
			}
		}
		
	</style>
</head>
<body>
	<div class='controls'>%buttons%</div>
	<hr>
	<div class='status'>%status%</div>
</body>
